<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--启用 IE Edge 模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="utf-8">
    <title>IFE Task 7</title>
    <link rel="stylesheet" href="css/Task7.css">
</head>
<body>
<!--锚点，回到顶部位置-->
<a name="top"></a>
<!--容器，包裹整个页面-->
<div class="container">
    <header>
        <div class="logo">
            <img src="img/book.png">
            <h2>新世界</h2>
        </div>
        <div class="login-in">
            <img src="img/person.jpg">
            <p>登录</p>
        </div>
        <nav>
            <ul>
                <li>首页</li>
                <li>最新活动</li>
                <li>项目介绍</li>
                <li>爱心社区</li>
                <li>关于我们</li>
                <li class="move"></li>
            </ul>
        </nav>
    </header>

    <section class="section-1">
        <!--黑色阴影遮盖-->
        <div class="black-mask">
            <div class="slogan">
                <p>Time of new life</p>
                <p>新时代，年轻的人们让我们一起<br>体验新生活，享受新生活</p>
                <span>开始体验</span>
            </div>
        </div>
        <div class="black-mask"></div>  
    </section>

    <section class="section-2">
        <div>
            <img src="img/circle.jpg">
            <p>打造全新世界观，让你更<br>爱你的生活</p>
        </div>
        <div>
            <img src="img/flag.jpg">
            <p>丰富多彩的公益活动，发<br>挥新世界的主人公意识</p>
        </div>
        <div>
            <img src="img/flower.jpg">
            <p>时尚的新理念，超前体验<br>未知的生活</p>
        </div>
        <div>
            <img src="img/window.jpg">
            <p  style="border-right: transparent;">完善的培养机制，培养你<br>全新的世界观</p>
        </div>
    </section>

    <section class="section-3">
        <img src="img/book.png" >
        <p>关于新世界，你不知道的还有什么？<p>
    </section>

    <section class="section-4">
        <h2>查询新世界城市活动信息</h2>
        <hr>
        <p>每个城市的有不同的活动信息，请自主查询您所需要了解的城市。</p>
        <!--使用列表方式展示选项，美化选择栏-->
        <form>
            <div class="option">
                <span>国家</span>
                <ul>
                    <li>中国</li>
                    <li>美国</li>
                    <li>欧洲</li>
                    <li>日本</li>
                </ul>
            </div>
            <div class="option">
                <span>省份</span>
                <ul>
                    <li>北京市</li>
                    <li>天津市</li>
                    <li>河北省</li>
                    <li>陕西省</li>
                    <li>内蒙古自治区</li>
                    <li>辽宁省</li>
                </ul>
            </div>
            <div class="option">
                <span>城市</span>
            </div>
            <input type="submit" name="sub" value="搜索"><br>
        </form>
    </section>

    <section class="section-5">
        <figure>
            <div>
                <img src="img/paint01.jpg">
            </div>
            <figcaption>
                <h4>北京活动</h4>
                <p>新社区大联盟</p>
            </figcaption>
        </figure>
        <figure>
            <figcaption>
                <h4>上海活动</h4>
                <p>夜上海景观探索</p>
            </figcaption>
            <div>
                <img src="img/paint02.jpg">
            </div>
        </figure>
        <figure>
            <div>
                <img src="img/paint03.jpg">
            </div>
            <figcaption>
                <h4>深圳活动</h4>
                <p>全新海岸线观点站</p>
            </figcaption>
        </figure>
        <figure style="margin-right: 0px;">
            <div>
                <img src="img/paint04.jpg">
            </div>
            <figcaption>
                <h4>香港活动</h4>
                <p>奢侈消费大派送</p>
            </figcaption>
        </figure>
    </section>

    <section class="section-6">
        <!--左侧，图片标语-->
        <div class="left">
            <div class="mes">
                <h2>新世界</h2>
                <p>TIME</p>
                <span>@新世界-北京<br>2016.04.01</span>
            </div>
        </div>
        <!--右侧，文字介绍-->
        <div class="right">
            <div class="mes">
                <h2>新世界/<span>01</span></h2>
                <p>新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</p>
                <input type="submit" name="sub" value="更多详情">
                <img src="img/point.png">
            </div>
        </div>
    </section>

    <section class="section-7">
        <!--左侧-->
        <div class="left">
            <p>新时代</p>
            <p>关于爱生活的我们</p>
            <hr>
            <button>查看更多</button>
        </div>
        <!--中心-->
        <div class="middle">
            <p>新时代</p>
            <p>关于爱生活的我们</p>
            <hr>
            <button>查看更多</button>
        </div>
        <!--右侧-->
        <div class="right">
            <img src="img/train.jpg">
        </div>
    </section>

    <section class="section-8">
        <div class="top">
            <h2>成为我们的志愿者</h2>
            <hr>
            <p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情<br>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
        </div>
        <div class="left">
            <div>
                <h3>新世界志愿者协议</h3>
                <p>加入新世界志愿者的人员必须遵守中华人民共和国的<br>相关法律，并且本着平等自愿的原则......</p>
                <span>v more</span>
            </div>
            <div>
                <h3>新世界志愿者权利</h3>
                <p>新世界志愿者享受新世界内部所有资源共享的权力<br>并且本着平等资源的原则</p>
                <span>v more</span>
            </div>
            <div>
                <h3>更多条款</h3>
                <span>v more</span>
            </div>
        </div>
        <div class="right">
            <form>
                <input type="text" name="name" placeholder="姓名">
                <input type="text" name="age" placeholder="年龄"><br>
                <input type="text" name="tel" placeholder="联系方式">
                <input type="text" name="adress" placeholder="联系地址">
                <textarea placeholder="请简单描述下您的梦想"></textarea>
                <input type="submit" name="sub" placeholder="申请提交">
            </form>
        </div>
    </section>

    <section class="section-9">
        <h3>联系我们</h3>
        <p>为了更好的获取我们的最新产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br>也可以通过以下任何方式关注我们的动态</p>
        <input type="text" name="email" placeholder="someone@email.com"><input type="submit" name="sub" value="提交"><br>
        <div class="social-app">
            <img src="img/qq.png">
            <img src="img/weibo.png">
            <img src="img/twitter.png">
            <img src="img/web.png">
        </div>
    </section>
    
    <footer>
        <p>@2016新世界</p>
        <a href="#top">Back to top</a>
    </footer>
</div>
</body>
</html>
